<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>学知鸟</title>
		<link rel="shortcut icon" href="../../share/img/logo.png">
		<link rel="stylesheet" href="../../share/css/main.css">
		<style type="text/css">
			#demo1 {
				position: relative;
				width: 200px;
				height: 100px;
				overflow: hidden;
				text-align: center;
				line-height: 100px;
				color: aquamarine;
				font-size: 30px;
				font-family: '宋体';
			}

			#demo1 div {
				position: absolute;
			}

			#demo1 :nth-child(1) {
				top: 0;
				left: 0;
				width: 100%;
				height: 2px;
				animation: run1 1s linear infinite;
				/* animation-delay: 0s;  */
				background: linear-gradient(to right, transparent, red);
			}

			#demo1 :nth-child(2) {
				top: 0;
				right: 0;
				height: 100%;
				width: 2px;
				animation: run2 1s linear infinite;
				/* animation-delay: 1s; 设置动画延迟加载时间*/
				background: linear-gradient(to bottom, transparent, cyan);
			}

			#demo1 :nth-child(3) {
				bottom: 0;
				left: 0;
				height: 2px;
				width: 100%;
				animation: run3 1s linear infinite;
				/* animation-delay: 2s; 设置动画延迟加载时间*/
				background: linear-gradient(to right, transparent, cyan);
			}

			#demo1 :nth-child(4) {
				top: 0;
				left: 0;
				height: 100%;
				width: 2px;
				animation: run4 1s linear infinite;
				/* animation-delay: 3s; 设置动画延迟加载时间 */
				background: linear-gradient(to top, transparent, cyan);
			}

			#demo2 {}
/* 
			.progress-ring {
				width: 100px;
				height: 100px;
				border-radius: 50%;
				border: solid #007bff 10px;
				background: linear-gradient(to right, #e74c3c, #f1c40f, #2ecc71);
				animation: spin 3s linear infinite;
			}
 */

			@keyframes spin {
				0% {
					transform: rotate(0deg);
				}

				100% {
					transform: rotate(360deg);
				}
			}

			@keyframes run1 {
				from {
					transform: translateX(-100%)
				}

				to {
					transform: translateX(100%)
				}
			}

			@keyframes run2 {
				from {
					transform: translateY(-100%)
				}

				to {
					transform: translateY(100%)
				}
			}

			@keyframes run3 {
				from {
					transform: translateX(100%)
				}

				to {
					transform: translateX(-100%)
				}
			}

			@keyframes run4 {
				from {
					transform: translateY(100%)
				}

				to {
					transform: translateY(-100%)
				}
			}


			#demo3 {}

/* 			.progress-circle {
				border-radius: 50%;
				width: 100px;
				height: 100px;
				background: conic-gradient(#4db8ff 75%, #f5f5f5 0%);
				position: relative;
				box-shadow: 0 0 5px rgba(0, 0, 0, 0.4);
			} */
/* 
			.progress-value {
				position: absolute;
				top: 50%;
				left: 50%;
				transform: translate(-50%, -50%);
				color: white;
				font-size: 20px;
				font-weight: bold;
			} */



			#demo4 {
				display: flex;
				justify-content: space-around;
				flex-wrap: wrap;
				align-items: center;
			}

			.progress {
				width: 100px;
				height: 100px;
				color: #fff;
				border-radius: 50%;
				overflow: hidden;
				position: relative;
				background: #07070c;
				text-align: center;
				line-height: 100px;
				margin: 20px;
				box-shadow: 2px 2px 2px 2px white;
			}

			.progress::after {
				content: "%";
			}

			.progress .title {
				position: relative;
				z-index: 100;
			}

			.progress .overlay {
				width: 50%;
				height: 100%;
				position: absolute;
				top: 0;
				left: 0;
				z-index: 1;
				background-color: #07070c;
			}

			.progress .left,
			.progress .right {
				width: 50%;
				height: 100%;
				position: absolute;
				top: 0;
				left: 0;
				border: 10px solid gray;
				border-radius: 100px 0px 0px 100px;
				border-right: 0;
				transform-origin: right;
			}

			.progress .left {
				animation: load1 1s linear forwards;
			}

			.progress:nth-of-type(2) .right,
			.progress:nth-of-type(3) .right {
				animation: load2 0.5s linear forwards 1s;
			}

			.progress:last-of-type .right,
			.progress:first-of-type .right {
				animation: load3 0.8s linear forwards 1s;
			}

			@keyframes load1 {
				0% {
					transform: rotate(0deg);
				}

				100% {
					transform: rotate(180deg);
				}
			}

			@keyframes load2 {
				0% {
					z-index: 100;
					transform: rotate(180deg);
				}

				100% {
					z-index: 100;
					transform: rotate(270deg);
				}
			}

			@keyframes load3 {
				0% {
					z-index: 100;
					transform: rotate(180deg);
				}

				100% {
					z-index: 100;
					transform: rotate(315deg);
				}
			}
			
			
			#demo5{}
			
			.progress-svg {
			  --percent: 0;  /* 百分数 */
			  --size: 100px;  /* 尺寸大小 */
			  --border-width: 15px;  /* 环宽（粗细） */
			  --color: #7856d7;  /* 主色 */
			  --inactive-color: #ccc;  /* 辅助色 */
			  
			  position: relative;
			  width: var(--size);
			  height: var(--size);
			  border-radius: 50%;
			}
			
			/* 百分数文本 */
			.progress-svg::before {
			  position: absolute;
			  top: 50%;
			  left: 50%;
			  transform: translate(-50%, -50%);
			  counter-reset: progress var(--percent);
			  content: counter(progress) '%';
			  white-space: nowrap;
			  font-size: 18px;
			}
			
			/* SVG 容器 */
			.progress-svg > svg {
			  width: 100%;
			  height: 100%;
			  transform: rotate(-90deg);
			}
			
			/* 进度条圆环 */
			.progress-svg circle {
			  --r: calc((var(--size) - var(--border-width)) / 2);
			    
			  cx: calc(var(--size) / 2);
			  cy: calc(var(--size) / 2);
			  r: var(--r);
			  fill: none;
			  stroke-width: var(--border-width);
			  stroke-linecap: round;
			  transition: stroke-dasharray .4s linear, stroke .3s;
			}
			/* 优化：进度为0时隐藏进度条 */
			.progress-value {opacity: var(--percent);}
		</style>
	</head>
	<body>
		<div class="row">
			<div class="col-1">
				<section>
					<h3>流动边框</h3>
					<div id="demo1">
						海绵宝宝
						<div></div>
						<div></div>
						<div></div>
						<div></div>
					</div>
				</section>
				<section>
					<h3>环形进度条-1</h3>
					<div id="demo2">
						<div class="progress-ring"></div>
					</div>
				</section>
				<section>
					<h3>环形进度条-2</h3>
					<div id="demo3">
						<div class="progress-circle">
							<div class="progress-value">75%</div>
						</div>
					</div>
				</section>
				<section>
					<h3>环形进度条-3</h3>
					<div id="demo4">
						<div class="progress">
							<span class="title timer" data-from="0" data-to="85" data-speed="1800">85</span>
							<div class="overlay"></div>
							<div class="left"></div>
							<div class="right"></div>
						</div>
						<div class="progress">
							<span class="title timer" data-from="0" data-to="70" data-speed="1500">70</span>
							<div class="overlay"></div>
							<div class="left"></div>
							<div class="right"></div>
						</div>

					</div>
				</section>
			</div>
			<div class="col-1">
				<section>
					<h3>环形进度条-4</h3>
					<div id="demo5">
						<div class="progress-svg" style="--percent:50">
							<svg>
								<circle stroke="var(--inactive-color)" />
								<circle stroke="var(--color)" class="progress-value"
									style="stroke-dasharray: calc(2 * 3.1415 * var(--r) * (var(--percent) / 100)), 1000" />
							</svg>
						</div>
					</div>
				</section>
			</div>
			<div class="col-1"></div>
		</div>
	</body>
</html>
